/**
 * @flow
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    Image,
    Dimensions,
    TouchableOpacity,
    ScrollView,
    ListView
} from 'react-native';

const deviceWidth = Dimensions.get('window').width;

export default class TopViewListView extends Component {
    constructor(props){
        super(props);
        let ds = new ListView.DataSource({rowHasChanged:(row1,row2) => row1!==row2});
        this.state = {
            dataSource:ds.cloneWithRows(this.props.dataArr)
        };
    }
    
    render() {
        return (
            <ListView dataSource={this.state.dataSource} renderRow={this.renderRow} contentContainerStyle={styles.contentContainerStyle}/>
        );
    }
    
    renderRow(rowData) {
        let imgSource = {};
        switch (rowData.image){
            case 'collect':
                imgSource = require('../image/collect.png');
                break;
            default:
                imgSource = require('../image/collect.png');
        }
        return (
            <View>
                {/*<Image source={require(rowData.image)} style={{width:30,height:30}}/>*/}
                <Image source={imgSource} style={{width:10,height:10}}/>
                <Text>{rowData.title}</Text>
            </View>
        );
    }
    
}

const styles = StyleSheet.create({
    contentContainerStyle:{
        flexDirection:'row',
        flexWrap:'wrap'
    }
});
